<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI应用聊天界面</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }

        body {
            background-color: #f5f7fa;
            color: #333;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .chat-container {
            display: flex;
            flex-direction: column;
            height: 100vh;
            width: 100%; /* 改为100%宽度 */
            background-color: #fff;
        }

        .chat-header {
            padding: 16px 24px;
            background-color: #1976d2;
            color: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #e0e0e0;
        }

        .app-info {
            display: flex;
            align-items: center;
        }

        .app-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
        }

        .app-name {
            font-size: 18px;
            font-weight: 600;
        }

        .app-desc {
            font-size: 12px;
            opacity: 0.8;
            margin-top: 2px;
        }

        .chat-actions {
            display: flex;
            gap: 10px;
        }

        .chat-btn {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
        }

        .chat-btn:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        .chat-main {
            flex: 1;
            display: flex;
            overflow: hidden;
            width: 100%; /* 确保宽度100% */
        }

        .sidebar {
            width: 280px;
            border-right: 1px solid #e0e0e0;
            background-color: #f9f9f9;
            overflow-y: auto;
            padding: 16px;
            display: flex;
            flex-direction: column;
        }

        .chat-history {
            flex: 1;
            overflow-y: auto;
        }

        .history-title {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 12px;
            color: #666;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .history-item {
            padding: 10px 12px;
            border-radius: 6px;
            margin-bottom: 8px;
            cursor: pointer;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transition: all 0.2s;
        }

        .history-item:hover {
            background-color: #e0e0e0;
        }

        .history-item.active {
            background-color: #e3f2fd;
            color: #1976d2;
        }

        .new-chat-btn {
            background-color: #1976d2;
            color: white;
            border: none;
            padding: 10px 16px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: pointer;
            margin-top: 16px;
            transition: all 0.2s;
        }

        .new-chat-btn:hover {
            background-color: #1565c0;
        }

        .chat-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            width: calc(100% - 280px); /* 计算剩余宽度 */
        }

        .messages-container {
            flex: 1;
            padding: 24px;
            overflow-y: auto;
            background-color: #f5f7fa;
        }

        .message {
            max-width: 80%;
            margin-bottom: 20px;
            display: flex;
            flex-direction: column;
        }

        .message-user {
            align-items: flex-end;
            margin-left: auto;
        }

        .message-ai {
            align-items: flex-start;
            margin-right: auto;
        }

        .message-bubble {
            padding: 12px 16px;
            border-radius: 18px;
            font-size: 15px;
            line-height: 1.5;
            position: relative;
            word-wrap: break-word;
        }

        .message-user .message-bubble {
            background-color: #1976d2;
            color: white;
            border-bottom-right-radius: 4px;
        }

        .message-ai .message-bubble {
            background-color: white;
            color: #333;
            border: 1px solid #e0e0e0;
            border-bottom-left-radius: 4px;
        }

        .message-time {
            font-size: 12px;
            color: #999;
            margin-top: 4px;
        }

        .message-ai .message-time {
            text-align: left;
        }

        .message-user .message-time {
            text-align: right;
        }

        .input-container {
            padding: 16px 24px;
            border-top: 1px solid #e0e0e0;
            background-color: white;
        }

        .input-box {
            display: flex;
            align-items: flex-end;
            gap: 12px;
        }

        .textarea-wrapper {
            flex: 1;
            position: relative;
        }

        .message-input {
            width: 100%;
            min-height: 48px;
            max-height: 150px;
            padding: 12px 16px;
            border: 1px solid #e0e0e0;
            border-radius: 24px;
            resize: none;
            font-size: 15px;
            line-height: 1.5;
            outline: none;
            transition: all 0.2s;
        }

        .message-input:focus {
            border-color: #1976d2;
            box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
        }

        .send-btn {
            width: 48px;
            height: 48px;
            background-color: #1976d2;
            color: white;
            border: none;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
        }

        .send-btn:hover {
            background-color: #1565c0;
        }

        .send-btn:disabled {
            background-color: #b0bec5;
            cursor: not-allowed;
        }

        .action-buttons {
            display: flex;
            gap: 8px;
            margin-top: 8px;
        }

        .action-btn {
            background: none;
            border: none;
            color: #666;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
        }

        .action-btn:hover {
            background-color: #f0f0f0;
        }

        .typing-indicator {
            display: flex;
            align-items: center;
            gap: 4px;
            margin-bottom: 20px;
            opacity: 0.7;
        }

        .typing-dot {
            width: 8px;
            height: 8px;
            background-color: #666;
            border-radius: 50%;
            animation: typingAnimation 1.4s infinite ease-in-out;
        }

        .typing-dot:nth-child(1) {
            animation-delay: 0s;
        }

        .typing-dot:nth-child(2) {
            animation-delay: 0.2s;
        }

        .typing-dot:nth-child(3) {
            animation-delay: 0.4s;
        }

        @keyframes typingAnimation {
            0%, 60%, 100% {
                transform: translateY(0);
            }
            30% {
                transform: translateY(-5px);
            }
        }

        .file-upload {
            display: none;
        }

        .file-preview {
            margin-top: 8px;
            padding: 8px;
            background-color: #f5f5f5;
            border-radius: 4px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .file-icon {
            color: #1976d2;
        }

        .file-name {
            flex: 1;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .file-remove {
            color: #f44336;
            cursor: pointer;
        }

        .suggestions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 16px;
        }

        .suggestion-btn {
            background-color: #e3f2fd;
            color: #1976d2;
            border: none;
            border-radius: 16px;
            padding: 6px 12px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .suggestion-btn:hover {
            background-color: #bbdefb;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .sidebar {
                width: 100%;
                display: none;
            }

            .sidebar.active {
                display: flex;
            }

            .chat-main {
                flex-direction: column;
            }

            .chat-content {
                width: 100%;
            }

            .message {
                max-width: 90%;
            }
        }
    </style>
</head>
<body>
<div class="chat-container">
    <div class="chat-header">
        <div class="app-info">
            <div class="app-icon" id="appIcon" style="background-color: #e0f7fa;">
                <i class="fas fa-file-contract" style="color: #00acc1;"></i>
            </div>
            <div>
                <div class="app-name" id="appName">公文写作</div>
                <div class="app-desc" id="appDesc">根据模板和关键词自动生成公文初稿</div>
            </div>
        </div>
        <div class="chat-actions">
            <button class="chat-btn" id="historyToggleBtn">
                <i class="fas fa-history"></i>
            </button>
            <button class="chat-btn" id="clearChatBtn">
                <i class="fas fa-trash-alt"></i>
            </button>
            <button class="chat-btn" id="settingsBtn">
                <i class="fas fa-cog"></i>
            </button>
            <button class="chat-btn" id="closeChatBtn">
                <i class="fas fa-times"></i>
            </button>
        </div>
    </div>

    <div class="chat-main">
        <div class="sidebar" id="sidebar">
            <button class="new-chat-btn" id="newChatBtn">
                <i class="fas fa-plus"></i> 新对话
            </button>
            <div class="chat-history">
                <div class="history-title">
                    <span>历史对话</span>
                    <i class="fas fa-search"></i>
                </div>
                <div class="history-item active">公文写作 - 2023.10.15</div>
                <div class="history-item">关于年度报告的问题</div>
                <div class="history-item">请示文件模板咨询</div>
                <div class="history-item">通知文件校对</div>
                <div class="history-item">公文格式咨询</div>
                <div class="history-item">会议纪要生成</div>
                <div class="history-item">公文写作 - 2023.09.28</div>
                <div class="history-item">政策文件解读</div>
                <div class="history-item">公文写作 - 2023.09.15</div>
                <div class="history-item">工作总结模板</div>
            </div>
        </div>

        <div class="chat-content">
            <div class="messages-container" id="messagesContainer">
                <div class="suggestions">
                    <button class="suggestion-btn">如何写一份请示文件？</button>
                    <button class="suggestion-btn">请帮我生成一份会议通知</button>
                    <button class="suggestion-btn">公文的标准格式是什么？</button>
                    <button class="suggestion-btn">如何撰写工作总结？</button>
                </div>

                <div class="message message-ai">
                    <div class="message-bubble">
                        您好！我是公文写作助手，可以帮助您快速生成各类公文初稿、检查公文格式规范、提供写作建议等。请问您需要什么帮助？
                    </div>
                    <div class="message-time">2023年10月15日 14:30</div>
                </div>

                <div class="message message-user">
                    <div class="message-bubble">
                        我需要写一份关于组织年度工作总结会议的通知
                    </div>
                    <div class="message-time">2023年10月15日 14:32</div>
                </div>

                <div class="message message-ai">
                    <div class="message-bubble">
                        好的，我可以帮您生成会议通知的初稿。请提供以下信息：<br><br>
                        1. 会议时间<br>
                        2. 会议地点<br>
                        3. 参会人员范围<br>
                        4. 需要准备的材料<br>
                        5. 其他特殊要求
                    </div>
                    <div class="message-time">2023年10月15日 14:32</div>
                </div>

                <div class="typing-indicator" id="typingIndicator" style="display: none;">
                    <div class="typing-dot"></div>
                    <div class="typing-dot"></div>
                    <div class="typing-dot"></div>
                    <span>AI正在思考...</span>
                </div>
            </div>

            <div class="input-container">
                <div class="file-preview" id="filePreview" style="display: none;">
                    <i class="fas fa-file-alt file-icon"></i>
                    <span class="file-name" id="fileName"></span>
                    <i class="fas fa-times file-remove" id="fileRemove"></i>
                </div>

                <div class="input-box">
                    <div class="textarea-wrapper">
                        <textarea class="message-input" id="messageInput" placeholder="请输入您的问题..." rows="1"></textarea>
                        <div class="action-buttons">
                            <button class="action-btn" id="uploadFileBtn">
                                <i class="fas fa-paperclip"></i> 附件
                            </button>
                            <input type="file" class="file-upload" id="fileUpload">
                            <button class="action-btn" id="templateBtn">
                                <i class="fas fa-file-alt"></i> 模板
                            </button>
                            <button class="action-btn" id="formatBtn">
                                <i class="fas fa-align-left"></i> 格式检查
                            </button>
                        </div>
                    </div>
                    <button class="send-btn" id="sendBtn" disabled>
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 动态设置应用信息
    document.addEventListener('DOMContentLoaded', function() {
        // 从URL参数获取应用信息
        const urlParams = new URLSearchParams(window.location.search);
        const appName = urlParams.get('app') || '公文写作';
        const appDesc = urlParams.get('desc') || '根据模板和关键词自动生成公文初稿';
        const iconClass = urlParams.get('icon') || 'fa-file-contract';
        const iconColor = urlParams.get('iconColor') || '#00acc1';
        const iconBg = urlParams.get('iconBg') || '#e0f7fa';

        document.getElementById('appName').textContent = appName;
        document.getElementById('appDesc').textContent = appDesc;
        const appIcon = document.getElementById('appIcon');
        appIcon.style.backgroundColor = iconBg;
        appIcon.innerHTML = `<i class="fas ${iconClass}" style="color: ${iconColor};"></i>`;

        // 消息输入框自动调整高度
        const messageInput = document.getElementById('messageInput');
        messageInput.addEventListener('input', function() {
            this.style.height = 'auto';
            this.style.height = (this.scrollHeight) + 'px';

            // 启用/禁用发送按钮
            document.getElementById('sendBtn').disabled = this.value.trim() === '';
        });

        // 发送消息
        document.getElementById('sendBtn').addEventListener('click', sendMessage);
        messageInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                if (this.value.trim() !== '') {
                    sendMessage();
                }
            }
        });

        // 文件上传
        document.getElementById('uploadFileBtn').addEventListener('click', function() {
            document.getElementById('fileUpload').click();
        });

        document.getElementById('fileUpload').addEventListener('change', function() {
            if (this.files.length > 0) {
                const file = this.files[0];
                document.getElementById('fileName').textContent = file.name;
                document.getElementById('filePreview').style.display = 'flex';
            }
        });

        document.getElementById('fileRemove').addEventListener('click', function() {
            document.getElementById('fileUpload').value = '';
            document.getElementById('filePreview').style.display = 'none';
        });

        // 切换历史侧边栏
        document.getElementById('historyToggleBtn').addEventListener('click', function() {
            document.getElementById('sidebar').classList.toggle('active');
        });

        // 新对话
        document.getElementById('newChatBtn').addEventListener('click', function() {
            if (confirm('确定要开始新的对话吗？当前对话将保存到历史记录中。')) {
                document.getElementById('messagesContainer').innerHTML = `
                        <div class="suggestions">
                            <button class="suggestion-btn">如何写一份请示文件？</button>
                            <button class="suggestion-btn">请帮我生成一份会议通知</button>
                            <button class="suggestion-btn">公文的标准格式是什么？</button>
                            <button class="suggestion-btn">如何撰写工作总结？</button>
                        </div>

                        <div class="message message-ai">
                            <div class="message-bubble">
                                您好！我是${appName}助手，可以帮助您${appDesc}。请问您需要什么帮助？
                            </div>
                            <div class="message-time">${getCurrentTime()}</div>
                        </div>
                    `;
            }
        });

        // 清空聊天
        document.getElementById('clearChatBtn').addEventListener('click', function() {
            if (confirm('确定要清空当前对话吗？')) {
                document.getElementById('messagesContainer').innerHTML = `
                        <div class="suggestions">
                            <button class="suggestion-btn">如何写一份请示文件？</button>
                            <button class="suggestion-btn">请帮我生成一份会议通知</button>
                            <button class="suggestion-btn">公文的标准格式是什么？</button>
                            <button class="suggestion-btn">如何撰写工作总结？</button>
                        </div>

                        <div class="message message-ai">
                            <div class="message-bubble">
                                您好！我是${appName}助手，可以帮助您${appDesc}。请问您需要什么帮助？
                            </div>
                            <div class="message-time">${getCurrentTime()}</div>
                        </div>
                    `;
            }
        });

        // 关闭聊天窗口
        document.getElementById('closeChatBtn').addEventListener('click', function() {
            if (confirm('确定要关闭聊天窗口吗？')) {
                window.close(); // 在实际应用中可能需要使用其他方法关闭窗口
            }
        });

        // 点击建议问题
        document.querySelectorAll('.suggestion-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                messageInput.value = this.textContent;
                messageInput.focus();
                document.getElementById('sendBtn').disabled = false;
            });
        });

        // 点击历史记录
        document.querySelectorAll('.history-item').forEach(item => {
            item.addEventListener('click', function() {
                document.querySelectorAll('.history-item').forEach(i => i.classList.remove('active'));
                this.classList.add('active');
                // 在实际应用中，这里会加载对应的历史对话
            });
        });
    });

    function sendMessage() {
        const messageInput = document.getElementById('messageInput');
        const message = messageInput.value.trim();
        if (message === '') return;

        // 添加用户消息
        const messagesContainer = document.getElementById('messagesContainer');
        messagesContainer.innerHTML += `
                <div class="message message-user">
                    <div class="message-bubble">
                        ${escapeHtml(message)}
                    </div>
                    <div class="message-time">${getCurrentTime()}</div>
                </div>
            `;

        // 显示"正在输入"指示器
        const typingIndicator = document.getElementById('typingIndicator');
        typingIndicator.style.display = 'flex';

        // 清空输入框
        messageInput.value = '';
        messageInput.style.height = 'auto';
        document.getElementById('sendBtn').disabled = true;

        // 滚动到底部
        messagesContainer.scrollTop = messagesContainer.scrollHeight;

        // 模拟AI回复
        setTimeout(() => {
            typingIndicator.style.display = 'none';

            // 根据不同的应用生成不同的回复
            const appName = document.getElementById('appName').textContent;
            let aiResponse = '';

            if (appName.includes('公文写作')) {
                if (message.includes('通知') || message.includes('会议')) {
                    aiResponse = `好的，我已为您生成会议通知初稿：<br><br>
                        <strong>关于召开年度工作总结会议的通知</strong><br><br>
                        各部门：<br>
                        为全面总结本年度工作，经研究决定召开年度工作总结会议，现将有关事项通知如下：<br><br>
                        一、会议时间：2023年12月20日（星期三）上午9:30<br>
                        二、会议地点：行政楼三楼会议室<br>
                        三、参会人员：各部门负责人<br>
                        四、会议要求：请各部门准备5分钟发言材料，重点汇报本年度工作亮点和明年工作计划。<br><br>
                        特此通知。<br><br>
                        办公室<br>
                        2023年12月15日<br><br>
                        请确认是否需要修改或补充内容。`;
                } else if (message.includes('请示')) {
                    aiResponse = `请示文件通常包含以下要素：<br><br>
                        1. 标题：关于×××的请示<br>
                        2. 主送机关：上级单位名称<br>
                        3. 正文：包括请示缘由、请示事项、结束语<br>
                        4. 附件（如有）<br>
                        5. 发文机关署名和日期<br><br>
                        您需要我帮您生成具体的请示文件吗？请提供相关事项和背景信息。`;
                } else {
                    aiResponse = `我已理解您的需求。为了提供更准确的帮助，请您提供以下信息：<br><br>
                        1. 公文类型（通知、请示、报告、函等）<br>
                        2. 主要内容要点<br>
                        3. 是否有特定格式要求<br>
                        4. 其他特殊说明<br><br>
                        我将根据这些信息为您生成专业的公文初稿。`;
                }
            } else if (appName.includes('政策问答')) {
                aiResponse = `根据相关政策法规库检索，以下信息可能对您有帮助：<br><br>
                    <strong>相关政策条款：</strong><br>
                    1. 《×××管理办法》第十条规定：...<br>
                    2. 《×××实施细则》第五条明确：...<br><br>
                    <strong>常见问题解答：</strong><br>
                    Q: 此类情况通常如何处理？<br>
                    A: 根据实践案例，通常采取...<br><br>
                    需要更详细的信息或具体案例分析吗？`;
            } else {
                aiResponse = `我已收到您的请求。正在处理中...<br><br>
                    为了提供更精准的服务，请您确认以下信息是否准确：<br><br>
                    1. ${message}<br>
                    2. 是否有其他补充说明？<br><br>
                    或者您可以直接告诉我您希望我如何帮助您。`;
            }

            messagesContainer.innerHTML += `
                    <div class="message message-ai">
                        <div class="message-bubble">
                            ${aiResponse}
                        </div>
                        <div class="message-time">${getCurrentTime()}</div>
                    </div>
                `;

            // 滚动到底部
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
        }, 1500);
    }

    function getCurrentTime() {
        const now = new Date();
        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, '0');
        const day = String(now.getDate()).padStart(2, '0');
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        return `${year}年${month}月${day}日 ${hours}:${minutes}`;
    }

    function escapeHtml(unsafe) {
        return unsafe
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#039;")
            .replace(/\n/g, "<br>");
    }
</script>
</body>
</html>